<template>
  <div class="bg-style">
    <i-pageBody class="add_i-color">
      <div slot="page-main">
        <div class="container container-space container-space--vertical">
          <div class="container-space__child">
            <Form :label-width="160">
              <Row :gutter="20">
                <i-col :span="8">
                  <FormItem label="事件区域：">
                    <span>{{ message.areaName }}</span>
                  </FormItem>
                </i-col>
                <i-col :span="8">
                  <FormItem label="下发时间：">
                    <span>{{ message.ordertime }}</span>
                  </FormItem>
                </i-col>
                <i-col :span="8">
                  <FormItem label="限电负荷：">
                    <span>{{ message.peakclipping }}</span>
                  </FormItem>
                </i-col>
                <i-col :span="8">
                  <FormItem label="可调负荷：">
                    <span>{{ message.drcap }}</span>
                  </FormItem>
                </i-col>
                <i-col :span="8">
                  <FormItem label="校验结果：">
                    <span>{{ message.checkLabel }}</span>
                  </FormItem>
                </i-col>
                <i-col :span="8">
                  <FormItem label="指令状态：">
                    <span>{{ message.orderLabel }}</span>
                  </FormItem>
                </i-col>
              </Row>
            </Form>
          </div>
          <div class="container-space__child">
            <Table
              :columns="columns"
              :data="data"
              disabled-hover
              border
              show-summary
              :summary-method="handleSummary"
              :loading="tableLoading"
            ></Table>
          </div>
          <div class="container-space__child" v-show="data.length > 0">
            <div class="container-page">
              <PageHeader
                :total="formdata.total"
                :page-size="formdata.pageSize"
                :page="formdata.page"
              ></PageHeader>
              <Page
                :total="formdata.total"
                :page-size="formdata.pageSize"
                :current="formdata.page"
                @on-change="handlePage"
                show-sizer
                @on-page-size-change="handlePageSize"
              />
            </div>
          </div>
        </div>
      </div>
    </i-pageBody>
  </div>
</template>

<script>
import PageHeader from "../../components/page-header";
import { TABLE_DECOMPOSE_LIST_COLUNMS } from "./constants";
import { getEmergencySelect } from "@/api/scada";
export default {
  name: "emergency-decompose",
  props: {},
  data() {
    const columns = [...TABLE_DECOMPOSE_LIST_COLUNMS];
    return {
      loading: {
        normal: false,
        page: false
      },
      message: {},
      formdata: {
        controlsId: "",
        page: 1,
        pageSize: 10,
        total: 0
      },
      columns,
      data: []
    };
  },
  computed: {
    tableLoading() {
      const {
        loading: { normal, page }
      } = this;
      return normal || page;
    }
  },
  created() {},
  mounted() {
    this.handleRouter();
  },
  watch: {},
  methods: {
    handleRouter() {
      const {
        query: { controlsId },
        params
      } = this.$route;
      console.log(params);
      this.formdata.controlsId = controlsId;
      this.message = params;
      this.getEmergencyList();
    },
    handlePage(page) {
      this.formdata.page = page;
      this.getEmergencyList();
    },
    handlePageSize(pageSize) {
      this.formdata.pageSize = pageSize;
      this.getEmergencyList();
    },
    getEmergencyList(loadingType = "normal") {
      this.loading[loadingType] = true;
      let {
        formdata: { controlsId, page: currentPage, pageSize }
      } = this;

      const params = {
        controlsId,
        currentPage,
        pageSize
      };
      getEmergencySelect(params)
        .then((ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            const { totalNum, custom } = result || {};
            const { data } = custom || {};
            this.formdata.total = totalNum || 0;
            this.data = data || [];
          }
        })
        .finally(() => {
          this.loading[loadingType] = false;
        });
    },
    handleSummary({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const { key } = column;
        if (index === 0) {
          sums[key] = {
            key,
            value: "总计"
          };
          return;
        } else if (key === "kdfh") {
          const value = data
            .map((item) => Number(item[key]))
            .filter((element) => !isNaN(element))
            .reduce((prev, next) => prev + next, 0);
          sums[key] = {
            key,
            value
          };
        } else {
          sums[key] = {
            key,
            value: ""
          };
        }
      });
      return sums;
    }
  },
  components: { PageHeader }
};
</script>
<style scoped lang="scss">
.bg-style {
  width: 100%;
  height: 100%;
}
.container {
  padding: 20px;
  height: 100%;
  overflow: auto;
}
.container-title {
  padding-left: 10px;
  font-size: 16px;
  color: #333;
  position: relative;
}
.container-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0893fd;
  line-height: 16px;
}

.container-space > .container-space__child:not(:last-child) {
  margin-right: 20px;
}
.container-space.container-space--vertical
  > .container-space__child:not(:last-child) {
  margin-bottom: 20px;
  margin-right: 0;
}
.container-space--inner {
  padding: 20px;
}

.container-align--center {
  text-align: center;
}
.container-align--right {
  text-align: right;
}
.container-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style lang="scss" scoped>
/deep/ .ivu-table-tip table tr td {
  text-align: center;
  background-image: url("~@/assets/img/zwsj.png");
  background-position: center 60px;
  background-repeat: no-repeat;
  color: #999;
  height: 369px;
  background-size: 190px;
  span {
    display: none;
  }
}
</style>
